<template>
	<view class="content">
		<view class="flex_c">
			<view class="ss">
				<input type="text" placeholder="请输入关键词或会议名称" v-model="queryData.keywords" />
				<text @click="changeK()">搜索</text>
			</view>
			<view class="" style="background-color: #fff;display: flex;justify-content: center;width: 100%;">
				<view @click="toPage('chooseCity')" class="select pic" :class="city_id?'select_a':''">{{city_name||'城市'}}</view>
				<picker class="pic" @change="typeChange" mode = 'selector' :range="typeList" range-key='name'>
					<view class="select" :class="type_id?'select_a':''">{{type_id?type_name:'类型'}}</view>
				</picker>
			</view>
	
		</view>
		<view class="zhan">		</view>
		<chain class="chain_v" ref="chain" :class="isshow?'showChain':''" @changeChain='changeChain' @touchmove.stop.prevent="()=>{}"></chain>
		<view class="item_l" v-for="(item,index) in hyList" :key='index' @click="toDetail(item)">
			<view class="img">
				<view class="type_t">{{item.type_id==1?'网洽会':item.type_id==2?'招商会':item.type_id==3?'专题会':''}}</view>
				<view class="type_t1" :class="item.timestatus.id==1||item.timestatus.id==2||item.timestatus.id==3?'orange':item.timestatus.id==4?'hui':''">{{item.timestatus.name}}</view>
				<!-- <view class="type_t1" :class="item.timestatus.id==1?'orange':item.timestatus.id==2?'hui':''">{{item.timestatus.name}}</view> -->
				<image v-if='item.thumbimg' :src="item.thumbimg" mode=""></image>
				<image v-else src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/huiyi.jpg" mode=""></image>
			</view>
			<view class="right_l">
				<view class="">{{item.title}}</view>
				<view class="bottom">
					<view class="flex_l"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/add.png" mode=""></image><text>{{item.address}}</text></view>
					<view class="flex_l"><image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/time.png" mode=""></image><text>{{item.starttime+' ~ '+item.endtime}}</text></view>
				</view>
			</view>
		</view>
		<endlist :isLoad='isLoad' :isfinsh='isfinsh' :length='hyList.length'></endlist>
		<jtcXf></jtcXf>
	</view>
</template>

<script>
	import wfallsFlow from '@/components/wfalls-flow/xuqiu.vue' 
	import jtcXf from '../../components/jtc-xf/jtc-xf.vue';
	import endlist from '@/components/endlist.vue' 
	import chain from '@/components/chain/chain'
	import {myIndustrychain , city , parklist , hy } from '../../utils/api.js'
	export default {
		data() {
			return {
				list:[{imgs:''}],
				paddingBottomHeight:0,
				active_tab:0,
				city:[],
				cityList:[],
				chainList:[],
				typeList:[{id:'',name:'全部'},{id:1,name:'网洽会'},{id:2,name:'招商会'},{id:3,name:'专题会'}],
				chain_name:'',
				city_name:'',
				type_name:'',
				type_id:'',
				chain_id:'',
				city_id:'',
				sheng_index:'',
				shi_index:'',
				queryData:{
					keywords:'',
					city_id:'',
					type_id:'',
					chain_id:'',
					role_id:125,
					page:1
				},
				hyList:[],
				isshow:false,
				isLoad:false,
				isfinsh:false
			}
		},
		components: {
			wfallsFlow,
			endlist,
			jtcXf,
			chain
		}, 
		onShow() {
				let chain,city
				// chain = uni.getStorageSync('yun_chain')
				city = uni.getStorageSync('chooseCity')
				if( (this.city_id==city.id)){
					return
				}else{
					this.city_id = city.id||''
					this.city_name = city.city_name||city.name||''
					// this.chain_id = chain.yun_chain_id||''
					// this.chain_name = chain.chain_name||''
					// this.queryData.yun_chain_id = chain.yun_chain_id||''
					this.queryData.city_id =  city.id||''
					this.getNeedsList()
				}
		},
		onLoad(option) {
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			        model.forEach(item => {
			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			                that.paddingBottomHeight = 40;
			            }
			        })
			    }
			});
			this.type_id = option.type_id||''
			this.type_name = option.type_name||''
			this.queryData.type_id = option.type_id||''
			this.queryData.keywords = option.keywords||''
			if(this.type_id&&!this.type_name){
				console.log(this.typeList.find(item=>item.id==this.type_id))
				this.type_name = this.typeList.find(item=>item.id==this.type_id).name
			}
		},
		beforeDestroy(){
			uni.setStorageSync('yun_chain',{})
			uni.setStorageSync('myCity',{city_name:'贵州',id:8})
		},
		methods: {
			changeChain(chain){
				this.isshow = false
				this.chain_id = chain.yun_chain_id||''
				this.chain_name = chain.chain_name||''
				this.queryData.yun_chain_id = chain.yun_chain_id||''
				this.getNeedsList()
			},
			showC(){
				console.log(this.isshow)
				if(this.isshow == true){
					this.isshow = false
					return
				}
				console.log(this.isshow)
				this.isshow=true
			},
			changeK(){
				this.queryData.page=1
				this.isfinsh = false
				this.getNeedsList()
			},
			getNeedsList(){
				uni.showLoading({ mask:true,
					title:'正在加载'
				})
				this.isLoad = true
				hy.GetMeetingList(this.queryData).then(res=>{
					this.isLoad = false
					if(this.queryData.page==1){
						this.hyList = res.data.data
					}else{
						this.hyList = this.hyList.concat(res.data.data)
					}
					if(res.data.last_page == this.queryData.page){
						this.isfinsh = true
					}
					uni.hideLoading()
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url:`/pages/huiyiDetail/huiyiDetail?id=${item.id}`
				})
			},
			getLoadNum(num){
					!this.isNewRenderDone&&uni.hideLoading()
					this.isNewRenderDone = true
			},
			chainChange(val){
				let item = this.chainList[val.detail.value]
				this.chain_id = item.id
				this.chain_name = item.chain_name
				
				this.queryData.chain_id=this.chain_id
				this.queryData.page=1
				this.isfinsh = true
				this.getNeedsList()
			},
			typeChange(val){
				let item = this.typeList[val.detail.value]
				this.type_id = item.id
				this.type_name = item.name
				
				this.queryData.type_id=this.type_id
				this.queryData.page=1
				this.isfinsh = true
				this.getNeedsList()
			},
			cityChange(val){
				let index = val.detail.value
				if(index[0]>0&&index[1]>0&&index[2]>0){
					this.city_id = this.city[index[0]].children[index[1]].children[index[2]].id
					this.city_name = this.city[index[0]].children[index[1]].children[index[2]].city_name
					this.city_ids = this.city[index[0]].id+','+ this.city[index[0]].children[index[1]].id +',' + this.city[index[0]].children[index[1]].children[index[2]].id
				}else if(index[0]>0&&index[1]>0){
					this.city_id = this.city[index[0]].children[index[1]].id
					this.city_name = this.city[index[0]].children[index[1]].city_name
					this.city_ids = this.city[index[0]].id+','+ this.city[index[0]].children[index[1]].id
				}else if(index[0]>0){
					this.city_id = this.city[index[0]].id
					this.city_name = this.city[index[0]].city_name
					this.city_ids = this.city_id
				}else{
					this.city_id =''
					this.city_name =''
				}
				this.queryData.city_id=this.city_id
				this.queryData.page=1
				this.isfinsh = true
				this.getNeedsList()
			},
			cityChange1(val){
				let index_c = val.detail.column
				let index = val.detail.value
				if(index_c==0){
					this.sheng_index = index
					this.cityList[1]=[]
					this.cityList[2]=[]
					if(index>=1){
						this.cityList[1] = this.city[index].children
						if(this.shi_index && this.city[index].children.length>(this.shi_index+1)){
							this.cityList[2] = this.city[this.sheng_index].children[this.shi_index].children
						}
					}
				}else if(index_c==1){
					this.shi_index = index
					this.cityList[2]=[]
					if(index>=1){
						this.cityList[index_c+1] = this.city[this.sheng_index].children[index].children
					}
				}
				this.cityList.push({})
				this.cityList.pop()
			},
			toPage(page,type){
				if(type == 'subPage'){
					uni.navigateTo({
						url:`/subPage/pages/${page}/${page}`
					})
					return
				}
				uni.navigateTo({
					url:`/pages/${page}/${page}`
				})
			},
		},	
		onReachBottom() {
			// 加锁，避免在加载更多时用户频繁下拉导致的重复触发而渲染异常
			if(!this.isNewRenderDone) return;   
			this.isNewRenderDone = false
			// 模拟分页请求 (加载更多)
			this.queryData.page+=1
			this.isfinsh = true
			this.getNeedsList()
		},
	}
</script>

<style scoped lang="scss">
	.chain_v{
		position: fixed;
		top: -280px;
		box-shadow: 0 4px 4px 0 rgba($color: #000000, $alpha: .3);
		z-index: 100;
		width: 100%;
		transition: all 0.3s;
		opacity: 0.5;
		height: 0;
		overflow: auto;
	}
	.showChain{
		height: 350px;
		top: 83px;
		opacity: 1;
	}
	.orange{
		background-color: #ff9933 !important;
	}
	.hui{
		background-color: #aaa !important;
	}
	.item_l{
			width: calc(100% - 20px);
			display: flex;
			padding: 15px 10px;
			border-bottom: 1px solid #C0C0C0;
			.img{
				width: 40%;
				height: 90px;
				margin-right: 10px;
				border-radius: 4px;
				overflow: hidden;
				position: relative;
			}
			.type_t1{
				position: absolute;
				top: 0;
				left: 0;
				background: rgba($color: #000000, $alpha: .5);
				color: #fff;
				padding: 2px 4px;
				font-size: 14px;
			}
			.type_t{
				height: 22px;
				width: 70px;
				text-align: center;
				line-height: 22px;
				background-color: #0D96FF;
				color: #fff;
				right: -18px;
				top: 6px;
				font-size: 12px;
				transform: rotate(45deg);
				position: absolute;
			}
			image{
				width: 100%;
				height: 100%;
			}
			.right_l{
				width: calc(60% - 10px);
				font-size: 14px;
				color: #000;
				position: relative;
			}
			.bottom{
				position: absolute;
				bottom: 2px;
				.flex_l{
					display: flex;
					align-items: center;
					font-size: 12px;
					color: #888;
					margin-top: 2px;
					text{
						width: calc(100% - 20px);
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					image{
						width: 12px;
						height: 12px;
						min-width: 12px;
						margin-right: 4px;
					}
				}
			}
		}
	
page{
	height: 100%;
	width: 100%;
}
.content {
	height: 100%;
	width: 100%;
}
.zhan{
	width: 100%;
	height: 80px;
}
.flex_c{
		width: 100%;
		// height: 44px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		flex-wrap: wrap;
		top: 0;
		z-index: 1000;
		background-color: #3BA7FF;
		box-shadow: 0px 2px 5px 0 #ddd;
		.ss{
			width: 100%;
			display: flex;
			align-items: center;
			margin: 0 10px;
			margin-bottom: 4px;
			position: relative;
			background-color: #fff;
			border-radius: 15px;	
			padding-left: 14px;
			.ss_img{
				width: 16px;
				height: 16px;
			}
			input{
				width: calc(80% - 20px);
				padding-left: 10px;
				height: 32px;
				font-size: 15px;
			}
			text{
				position: absolute;
				display: inline-block;
				right: 3px;
				height: 28px;
				line-height: 28px;
				border-radius: 14px;
				width: 60px;
				background: linear-gradient(90deg, #40A9FF99 0%, #40A9FF 100%);
				color: #fff;
				text-align: center;
				z-index: 10;
			}
		}
}
.pic{
	width: calc(50% - 20px) !important;
	text-align: center;
		}
		.pic1{
			width: 100%;
			margin-bottom: 8px;
		}
		.select{
			width: calc(100% - 20px);
			height: 36px;
			color: #333;
			line-height: 36px;
			background-color: #fff;
			border-radius: 4px;
			padding: 0 10px;
			position: relative;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			&::after{
				content: ' ';
				position: absolute;
				background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/xiala.png) no-repeat;
				background-size: 100% 100%;
				width: 6px;
				height: 6px;
				top: 14px;
				margin-left: 10px;
			}
		}
		.select_a{
			color: #333;
		}
		.text_a{
			width: calc(100% - 20px);
			background-color: #fff;
			border-radius: 4px;
			height: 110px;
			padding: 10px;
		}
</style>
